<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姜启航">
    <title></title>
    <style>
    .box{
        width: 180px;
        margin: 0 auto;
        border: 1px solid red;
        text-align: center;
        overflow: hidden;
    }
    h2{
        margin: 0;
        background-color: #aaa;
    }
    img{
        margin-top: 15px;
    }
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul li{
        position: relative;
    }
    a{
        color: inherit;
        text-decoration: none;  
    }
   
    .left{
        top: 0;
        left:100%;
        position: absolute;
        }

    p{
        padding: 0;
        margin: 0;
        background-color: lawngreen;
        width: 100%; 
        position: absolute;
        top: 150px; 
       
    } 
    </style>
</head>
<body>

<div class="box">
    <h2>专辑推荐</h2>
<ul>
    <li>
        <a href="#">
            <div class="right"><img src="./img/1_1.jpg" alt="">
                <p>COCCO/可可尼</p>
            </div>
            <div class="left"><img src="./img/1_2.jpg" alt="">
                <p>几何为网-极致绚烂</p>
            </div>
        </a>
    </li>
      <li><a href="#">
          <div class="right"><img src="./img/2_1.jpg" alt="">
                <p>COCCO/可可尼</p>
            </div>
            <div class="left"><img src="./img/2_2.jpg" alt="">
                <p>几何为网-极致绚烂</p>
            </div>
    </a></li> 
         <li><a href="#">
          <div class="right"><img src="./img/3_1.jpg" alt="">
                <p>COCCO/可可尼</p>
            </div>
            <div class="left"><img src="./img/3_2.jpg" alt="">
                <p>几何为网-极致绚烂</p>
            </div>
    </a></li> 
</ul>

</div>

    <script src="../jquery.js"></script>
</body>
</html>
<script>
    $('li').hover(function(){
        $(this).stop().animate({left:-180},300)
        $(this).find('.right p').stop().animate({top:180},300)
        $(this).find('.left p').stop().animate({top:150},300);
    },function(){
        $(this).stop().animate({left:0},300)
        $(this).find('.right p').stop().animate({top:150},300)
        $(this).find('.left p').stop().animate({top:180},300);
    })
   






</script>